<script lang="ts" setup>
import { ref } from "vue";
import backgroundBkg from "../../assets/chat-board/bkg.png";
import chatIcon from "../../assets/chat-board/chat.png";
import chatIconActive from "../../assets/chat-board/chat-active.png";
import userIcon from "../../assets/chat-board/user.png";
import userIconActive from "../../assets/chat-board/user-active.png";
import groupIcon from "../../assets/chat-board/group.png";
import groupIconActive from "../../assets/chat-board/group-active.png";

import closeImg from "../../assets/chat-board/close.png";

import chatInfo from "./chat-info.vue";
import chatUser from "./chat-user.vue";
import chatGroup from "./chat-group.vue";
const emits = defineEmits(["close"]);
const menuList = ref([
  {
    icon: chatIcon,
    activeIcon: chatIconActive,
  },
  {
    icon: userIcon,
    activeIcon: userIconActive,
  },
  {
    icon: groupIcon,
    activeIcon: groupIconActive,
  },
]);
const selectMenuIndex = ref(0);
const handleMenuClick = (index: number) => {
  selectMenuIndex.value = index;
};
const handleClose = () => {
  emits("close");
};
</script>

<template>
  <n-modal v-bind="$attrs">
    <div
      class="chat-wrapper"
      :style="{ backgroundImage: `url('${backgroundBkg}')` }"
    >
      <div class="chat-top-bar">
        <span class="title">即时消息</span>
        <img class="close" :src="closeImg" @click="handleClose" />
      </div>
      <div class="chat-center">
        <div class="chat-center-left">
          <div class="chat-menu">
            <div
              class="chat-menu-item"
              @click="handleMenuClick(index)"
              v-for="(item, index) in menuList"
            >
              <img
                :src="selectMenuIndex == index ? item.activeIcon : item.icon"
              />
            </div>
          </div>
        </div>
        <div class="chat-center-right">
          <div class="chat-sub-wrapper">
            <chatInfo v-if="selectMenuIndex == 0"></chatInfo>
            <chatUser v-if="selectMenuIndex == 1"></chatUser>
            <chatGroup v-if="selectMenuIndex == 2"></chatGroup>
          </div>
        </div>
      </div>
    </div>
  </n-modal>
</template>

<style lang="scss" scoped>
.chat-wrapper {
  width: 874px;
  height: 477px;
  background-size: 100% 100%;
  color: #fff;
  .chat-top-bar {
    position: relative;
    height: 52px;
    // background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
    .title {
      font-weight: bold;
      font-style: italic;
      font-size: 18px;
      color: transparent;
      /*定义背景渐变*/
      background-image: linear-gradient(to bottom, #fff, #00bfff);
      /*添加-webkit-background-clip，保证渐变生效*/
      -webkit-background-clip: text;
      background-clip: text;
    }
    .close {
      cursor: pointer;
    }
  }
  .chat-center {
    height: 425px;
    display: flex;
    justify-content: space-between;
    border-top: 2px solid rgba(8, 92, 154);
    margin: -2px 10px;
    .chat-center-left {
      .chat-menu {
        width: 90px;
        height: 425px;
        border-right: 2px solid rgba(8, 92, 154);
        display: flex;
        flex-direction: column;
        align-items: center;

        .chat-menu-item {
          margin: 10px 0;
          cursor: pointer;
          img {
            width: 25px;
            height: 25px;
            object-fit: contain;
          }
        }
      }
    }
    .chat-center-right {
      flex: 1;
      .chat-sub-wrapper {
        height: 425px;
        display: flex;
      }
    }
  }
}
</style>
